<template>
  <div style="width: 60%; margin: 50px auto">
    <el-card>
      <h1>账户明细</h1>
      <div style="text-align: left; margin-top: 50px">
        <el-date-picker
            type="daterange"
            v-model="dataRange"
        ></el-date-picker>
      </div>

      <el-table :data="transactionDetails" v-loading="loading">
        <el-table-column label="日期(UCT+0)" prop="time" width="150"></el-table-column>
        <el-table-column label="交易种类" prop="type" ></el-table-column>
        <el-table-column label="存入" prop="in"></el-table-column>
        <el-table-column label="支出" prop="out"></el-table-column>
        <el-table-column label="结余" prop="balance"></el-table-column>
        <el-table-column label="备注" prop="remark" width="150"></el-table-column>
        <el-table-column label="交易号" prop="transactionNumber" width="230"></el-table-column>
      </el-table>
    </el-card>

  </div>
</template>

<script>
import {getUserTransactionDetails} from "@/api/user";
export default {
  name: "TransactionDetail",
  data(){
    return {
      startTime: undefined,
      endTime: undefined,
      loading: false,
      transactionDetails: []
    }
  },
  methods: {
    loadTransactionDetail(){
      this.loading = true;
      getUserTransactionDetails(sessionStorage.getItem('userid'), this.startTime, this.endTime)
      .then(res => {
        if(res.code === 200){
          this.transactionDetails = res.data;
        }else{
          throw new Error(res.msg);
        }
      }).then(e => {
        this.$message.error(e.message);
      }).finally(() => {
        this.loading = false;
      });
    }
  },
  mounted() {
    const now = new Date();
    this.startTime = new Date(now.getFullYear(), now.getMonth());
    this.endTime = new Date(now.getFullYear(), now.getMonth(), now.getDate());
    this.loadTransactionDetail();
  },
  computed: {
    dataRange: {
      get(){
        return [this.startTime, this.endTime];
      },
      set(newVal){
        this.startTime = newVal[0];
        this.endTime = newVal[1];
        this.loadTransactionDetail();
      }
    }
  }
}
</script>

<style scoped>

</style>
